<template>
  <div class="paging">
    <div class="demo-split">
      <Form label-position="right" :label-width="100">
        <FormItem label="页面号序列">
          <Input v-model="value" />
        </FormItem>
        <FormItem label="物理块数">
          <Input v-model="memoryNumber" />
        </FormItem>
         <Button type="info" ghost @click="check">确认</Button>
      </Form>
      <div class="main">
        <div>
          <h2 style="margin: 30px;">FIFO</h2>
          <p class="fault mx-success">缺页数为：{{ FIFO_F }}</p>
          <p class="fault mx-success">缺页率为：{{ PageFaultRateFIFO }}</p>
          <p v-for="(v, i) in FIFOArr" :key="i">
            <span :class="{ 'mx-error': FIFO_F_tag.includes(i) }" style="color: #19be6b;">{{ proQueue[i] }} -></span>
             {{ v }}
          </p>
        </div>
        <div>
          <h2 style="margin: 30px;">LRU</h2>
          <p class="fault mx-success">缺页数为：{{ LRU_F }}</p>
          <p class="fault mx-success">缺页率为：{{ PageFaultRateLRU }}</p>
          <p v-for="(v, i) in LRUArr" :key="i">
            <span :class="{ 'mx-error': LRU_F_tag.includes(i) }" style="color: #19be6b;">{{ proQueue[i] }} -></span>
            {{ v }}</p>
        </div>
      
      </div>
      
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'paging',
  data() {
    let memoryNumber = 3
    const proQueue = [7,0,1,2,0,3,0,4,2,3,0,3,2,1,2,0,1,7,0,1]
    const pro = [...new Set(this.proQueue)]
    let value = proQueue.join(' ')
    return {
      split1: 0.5,
      /**
       * @description 内存块个数
       */
      memoryNumber,
      proQueue,
      pro,
      FIFOArr: [],
      LRUArr: [],
      PageFaultRateLRU: 0,
      PageFaultRateFIFO: 0,
      value,
      LRU_F: 0,
      FIFO_F: 0,
      LRU_F_tag: [],
      FIFO_F_tag: [],
      
    }
  },
  computed: {
    
  },
  methods: {
    FIFO(limit = 10) {
      limit = limit * 1
      let _store = []
      let _F = 0
      let _S = 0
      const FIFO_F_tag = []
      this.set = function (value, tag) {
        let temp
        if(_store.length < limit) {
          if(!_store.some((v, i) => {
            if(v === value) {
              temp = _store[0]
              _store[0] = v
              _store[i] = temp
              return true
            }
          })) {
            _store.unshift(value)
          }
          _S += 1
        } else {
          if(!_store.some(v => v === value)) {
            _F += 1
            FIFO_F_tag.push(tag)
            _store.pop()
            _store.unshift(value)
          } else {
            _S += 1
          }
        }
        return _store
      }
      this.PageFaultRate = function () {
        return _F / (_S + _F)
      }
      this.getFCount = function () {
        return _F
      }
      this.getFTag = function () {
        return FIFO_F_tag
      }
    },
    LRU(limit = 10) {
        limit = limit * 1
        let _store = [];
        let _F = 0
        let _S = 0
        const LRU_F_tag = []
        this.set = function (value, tag) {
          let temp
          if(_store.length < limit) {
            if(!_store.some((v, i) => {
              if(v === value) {
                temp = _store[0]
                _store[0] = v
                _store[i] = temp
                return true
              }
            })) {
              _store.unshift(value)
            }
            _S += 1
          } else {
            if(!_store.some(v => {
              if(v === value) {
                _S += 1
                _store.unshift(_store.pop())
                return true
              }
            })) {
              _F += 1
              LRU_F_tag.push(tag)
              _store.pop()
              _store.unshift(value)
            }
          }
          return _store
        }
        this.PageFaultRate = function () {
          return _F / (_S + _F)
        }
        this.getFCount = function () {
          return _F
        }
        this.getFTag = function () {
          return LRU_F_tag
        }
    },

    check() {
      const arr = this.value.trim().split(/\s+/)
      for (let i = 0; i < arr.length; i++) {
        arr[i] = arr[i] * 1
      }
      this.proQueue = arr
      this.render()
    },
    render() {
      const arr = [...this.proQueue]
      const LRU = new this.LRU(this.memoryNumber)
      const FIFO = new this.FIFO(this.memoryNumber)
      this.FIFOArr = []
      this.LRUArr = []
      arr.forEach((v, i) => {
        this.FIFOArr.push([...FIFO.set(v, i)])
        this.LRUArr.push([...LRU.set(v, i)])
      })
      this.FIFO_F = FIFO.getFCount()
      this.FIFO_F_tag = [...FIFO.getFTag()]
      this.LRU_F = LRU.getFCount()
      this.LRU_F_tag = [...LRU.getFTag()]
      this.PageFaultRateFIFO = FIFO.PageFaultRate()
      this.PageFaultRateLRU = LRU.PageFaultRate()
    }
    
  },
  created() {
    this.render()
  }
}
</script>

<style lang="less" scoped>
  .main {
    display: flex;
    div {
      flex: 1;
      p {
        line-height: 2em;
      }
      .fault {
        font-size: 20px;
        color: skyblue;
      }
    }
  }
  .ivu-form {
    width: 50%;
    margin: 20px auto;
  }
  .mx-success {
    color: #19be6b!important;
  }
  .mx-error {
    color: #ed4014!important;
  }
</style>